{# The assistant's voice, in the one modal: what a live call runs on (where
   the mount takes calls: ``call_rows``, ``calling``), the voice profiles,
   each with a preview; switch, make one from the active, or edit one; and
   how terms are said. ``view`` picks the piece: the composer's chip, the
   list, one voice's form, or the pronunciation list.
   Previews play through voice.js's Listen handler ([data-speak]). #}
{% from "components/macros/icons.html" import icon %}
{% from "components/macros/chat.html" import model_row, voice_chip, speak_button %}
{% from "components/macros/form.html" import action, field, text_input, number_input, select, primary_button %}
{% from "components/macros/feedback.html" import error_banner, empty_state %}
{% from "components/macros/layout.html" import dialog_title %}
{% from "components/macros/table.html" import data_table %}

{% if view == "chip" %}
{{ voice_chip(active, path, calling) }}

{% elif view == "list" %}
{% if chip_oob %}{{ voice_chip(active, path, calling, oob=True) }}{% endif %}
<div id="voice-profiles" class="space-y-4">
  {% if call_rows is not none %}
  {{ dialog_title("Calls and voice", "What a live call with " ~ assistant ~ " runs on (a meeting's too), and the voice it speaks in. A pick takes effect on the next call, or the next thing said.") }}
  <section class="space-y-1" data-calls>
    <h3 class="micro-label text-aegis-muted">Calls run on</h3>
    {% if call_rows %}
    <ul class="max-h-56 overflow-y-auto">
      {% for row in call_rows %}
      {{ model_row(row, calling is not none and calling.model_id == row.model_id, "data-call-model", hx_dialog_post(path ~ "/calls")) }}
      {% endfor %}
    </ul>
    {% else %}
    <p class="text-xs text-aegis-muted">No live model can be reached: a call needs an OpenAI or Google key with a realtime model in the catalog.</p>
    {% endif %}
  </section>
  <h3 class="micro-label text-aegis-muted">Voice</h3>
  {% else %}
  {{ dialog_title("Voice", "How " ~ assistant ~ " hears and speaks. A switch takes effect on the next thing said.") }}
  {% endif %}
  {% if voices %}
  <ul class="divide-y divide-aegis-border/60">
    {% for voice in voices %}
    <li class="flex items-center gap-3 py-2 aria-[current=true]:bg-aegis-teal/10 rounded px-2"
        data-voice-profile="{{ voice.id }}" {% if voice.is_active %}aria-current="true"{% endif %}>
      {{ speak_button(path ~ "/" ~ voice.id ~ "/preview", "text-aegis-muted hover:text-aegis-text") }}
      <span class="min-w-0 flex-1">
        <span class="block text-sm text-aegis-text truncate" data-name>{{ voice.name }}</span>
        <span class="block text-xs text-aegis-muted truncate">{{ voice.tts_voice }} · {{ voice.tts_model }} · {{ voice.tts_speed }}×{% if voice.tts_instructions %} · styled{% endif %}</span>
      </span>
      {% if voice.is_active %}
      {{ icon("check", "w-4 h-4 text-aegis-teal shrink-0", 2, '', label="In use") }}
      {% else %}
      {{ action("Use", hx_dialog_post(path ~ "/" ~ voice.id ~ "/active")) }}
      {% endif %}
      {{ action("Edit", hx_dialog(path ~ "/" ~ voice.id ~ "/edit")) }}
    </li>
    {% endfor %}
  </ul>
  {% else %}
  {{ empty_state("No voices yet", "The first one is made from .env when the app starts.") }}
  {% endif %}
  <p class="flex items-center justify-between gap-2 text-xs text-aegis-muted">How every voice says terms like Traefik.
    {{ action("Pronunciation", hx_dialog(path ~ "/pronunciation", "data-pronunciations")) }}</p>
  {# A new voice starts as a copy of the one in use, then opens to edit. #}
  <form {{ hx_dialog_post(path) }} class="flex items-end gap-2">
    {{ error_banner(errors) }}
    <label class="flex-1 block text-aegis-muted micro-label">New voice from {{ active.name if active else "the current one" }}
      {{ text_input("name", new_name, placeholder="e.g. Marin, faster", required=True) }}
    </label>
    {{ primary_button("Make", type="submit") }}
  </form>
</div>

{% elif view == "form" %}
<form {{ hx_dialog_post(path ~ "/" ~ voice.id) }} data-voice-form class="space-y-3">
  {{ dialog_title(voice.name, "In use - saving changes how it sounds now." if voice.is_active else "Not in use - preview it, then Use it from the list.") }}
  {{ error_banner(errors) }}
  {% call field("Name") %}{{ text_input("name", values.name, required=True) }}{% endcall %}
  <p class="text-xs text-aegis-muted">Speaks as {{ voice.tts_voice or "the default voice" }}{% if voice.tts_model %} on {{ voice.tts_model }}{% endif %}.
    <a data-voice-design href="/overseer/services/ai/voice?profile={{ voice.id }}" class="text-aegis-teal hover:underline">Design the voice</a></p>
  <div class="grid grid-cols-2 gap-3">
    {% call field("Hearing model") %}{{ select("stt_model", choices.stt_model, values.stt_model, blank=None, block=True) }}{% endcall %}
    {% call field("Reply") %}{{ select("reply", choices.reply, values.reply, blank=None, block=True) }}{% endcall %}
    {% call field("Live: check in after (seconds of quiet, 0 never)") %}{{ number_input("live_idle_seconds", values.live_idle_seconds, min=idle[0], max=idle[1]) }}{% endcall %}
    {% call field("While it works") %}{{ select("working_sound", choices.working_sound, values.working_sound, blank=None, block=True) }}{% endcall %}
  </div>
  <div class="flex items-center justify-between gap-2">
    {{ action("Back", hx_dialog(path)) }}
    <span class="flex items-center gap-2">
      {{ speak_button(path ~ "/" ~ voice.id ~ "/preview", "text-aegis-muted hover:text-aegis-text") }}
      {{ primary_button("Save", type="submit") }}
    </span>
  </div>
</form>

{% elif view == "said" %}
<div id="voice-pronunciation" class="space-y-4">
  {{ dialog_title("Pronunciation", "How every voice says these terms, read aloud and on a live call. A change takes effect on the next thing said.") }}
  <div class="max-h-72 overflow-y-auto">
    {% call(row) data_table([{"key": "term", "label": "Term"}, {"key": "say", "label": "Said as"}], said, flush=False) %}
    {% if row.key in saved %}
    {{ action("Remove", hx_dialog_post(path ~ "/pronunciation/delete"), tone="danger", vals={"term": row.term}) }}
    {% else %}
    <span class="text-xs text-aegis-muted">default</span>
    {% endif %}
    {% endcall %}
  </div>
  {# Saving a listed term changes how it is said; a new one joins the list. #}
  <form {{ hx_dialog_post(path ~ "/pronunciation") }} class="space-y-2">
    {{ error_banner(errors) }}
    <div class="grid grid-cols-3 gap-2">
      {% call field("Term") %}{{ text_input("term", values.term, placeholder="e.g. Traefik", required=True) }}{% endcall %}
      {% call field("Said as") %}{{ text_input("say", values.say, placeholder="e.g. traffic", required=True) }}{% endcall %}
      {% call field("IPA (optional)") %}{{ text_input("ipa", values.ipa, placeholder="e.g. ˈtræfɪk") }}{% endcall %}
    </div>
    <div class="flex items-center justify-between gap-2">
      {{ action("Back", hx_dialog(path)) }}
      {{ primary_button("Save", type="submit") }}
    </div>
  </form>
</div>
{% endif %}